<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 引入vue文件-->
    <script src = "js/vue.js"></script>
</head>
<body>
    <!--创建一个容器-->
    <div id="app">
           <!-- 需求： 将数组的数据显示在页面上,点击按钮时给数组添加一个对象 -->
           姓名：<input v-model = "user.name"> 年龄<input v-model = "user.age"><br />
           <button @click = "addFoot">给数组末尾添加用户</button>
           <button @click = "addFirst">给数组开头添加用户</button>
           <li  v-for = "item in list"  :key = "item.id">  <!-- id是唯一的，索引绑定每个用户的id -->
               <input type = "checkbox" >{{item.id}}::{{item.name}}::{{item.age}}
           </li>
           
        </li>
    </div>

    <script>
        //创建一个控制器，控制容器显示的数据
        let vm = new Vue({
            el: '#app' ,  //控制那个容器
            data: {   //定义数据
                list: [  //定义了一个数组
                    {id: 1, name : '张无忌', age: 20} ,
                    {id: 2, name : '郭靖', age: 25} ,
                    {id: 3, name : '杨过', age: 23} ,
                    {id: 4, name : '乔峰', age: 22} ,
                ]   ,
                user : {
                    id: -1 ,
                    name : '', 
                    age: ''
                }
            },
            methods: {
                addFoot() {
                    //给数组的末尾添加数据,为了更好点，我们页面上放置一些文本框，数据输入进来
                    //查找数组中最大的id
                    let max = 0 ;
                    this.list.forEach(u => u.id>max ? max = u.id : '')

                    //将max赋值给user对象的id
                    this.user.id = max + 1 ;

                    //将user对象放进数组
                    this.list.push(this.user)
                } ,
                addFirst(){
                     //查找数组中最大的id
                     let max = 0 ;
                    this.list.forEach(u => u.id>max ? max = u.id : '')

                    //将max赋值给user对象的id
                    this.user.id = max + 1 ;

                    //将user对象放进数组的开头
                    this.list.unshift(this.user)
                }
            },
        })
    </script>
</body>
</html>